<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            ajax  异步的  JavaScript和xml

            xml数据传输格式
                优：种类丰富  传输量非常大
                缺：解析麻烦  不太适合轻量数据
            
            json数据传输格式（字符串） 95%移动端应用
                优：轻量级数据  解析比较轻松
                缺：解析种类比较少  传输数据量比较小

            JSON.parse()
            JSON.stringify()
        */
        window.onload = function(){
            var oBtn = document.getElementById("btn1");

            //get 请求
            oBtn.onclick = function(){
                $ajax({
                    url:"www.baidu.com",
                    data:{username:xxx},
                    success:function(result){
                        alert(result);
                    },
                    error:function(msg){
                        alert(msg);
                    }
                })
            }

             //post 请求
             oBtn.onclick = function(){
                $ajax({
                    method:"post",
                    url:"www.baidu.com",
                    data:{username:xxx},
                    success:function(result){
                        alert(result);
                    },
                    error:function(msg){
                        alert(msg);
                    }
                })
            }
            oBtn.onclick = function(){
                //1.创建ajax对象
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
                }
                //2.调用open
                /*
                    第一个参数 请求方式 get post
                    第二个参数 URL
                    第三个参数 是否异步  true异步  false同步
                */
               xhr.open("get","www.baidu.com",true);
               //3.调用send
               /*
                    post提交的数据，需要通过send方法进行提交  在send方法前设置请求格式
                    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                    xhr.send("username=xxx&age=12");
               */
               xhr.send();
               //4.等待数据响应
               /*
                    readyState 发生变化的时候调用
                    0  调用open之前
                    1  调用send方法之后，发送请求
                    2  send方法完成，已经接收到所有的响应内容
                    3  正在解析下载到的数据
                    4  解析完成
               */
               xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4){
                       if(xhr.status == 200){
                           alert(xhr.responseText);
                       }else{
                           alert("error");
                       }
                   }
               }
            }
        }

        //封装函数
        function $ajax({method = "get",url,data,success,error}){
            //1.创建ajax对象
            var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
            }
             //2.调用open
             if(method == "get"&&data){
                 url += "?" +data;
             }
             //3.调用send
             xhr.open(method,url,true);
             if(method == "get"){
                 xhr.send();
             }else{
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(data);
             }
              //4.等待数据响应
              xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        if(success){
                            success(xhr.responseText);
                        }
                    }else{
                        if(error){
                            error("error"+xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <button id="btn1">下载</button>
</body>
</html>